﻿﻿@{
    Layout = "_Layout";
    ViewData["Title"] = "书签分类";
}

<avue-crud :data="tableData" :option="option" :permission="hasPermission" :page.sync="pageOption" :table-loading="loading"
    v-on:refresh-change="refreshChange"
    v-on:row-save="handleRowSave"
    v-on:row-update="handleRowUpdate"
    v-on:row-del="handleRowDel"
    v-on:search-change="searchChange"
    v-on:search-reset="resetChange"
     :cell-style="cellStyle"
    v-on:on-load="onLoad">
@*     <template slot="avatar" slot-scope="scope">
        <el-avatar shape="circle" :src="scope.row.avatar">{{scope.row.account}} </el-avatar>
    </template> *@
    <template slot="record" slot-scope="scope">
        <modify-record :data="scope.row"></modify-record>
    </template>
</avue-crud>

@section Scripts {
    <script>
        var putLineDicData = [{ label: `不推送`, value: 0, }, { label: `推送`, value: 1, }];
           new Vue({
            el: '#app',
            mixins: [curdMixin],
            data() {
                return {
                    name: "category",
                    pageUrl: "/category/pages",
                    addUrl: "/category/add",
                    editUrl: "/category/update",
                    deleteUrl: "/category/delete",

                    option: {
                        searchShowBtn: Permissions.avePermission(`category:searchBtn`),
                        refreshBtn: Permissions.avePermission(`category:searchBtn`),
                        searchMenuSpan:8,
                        rowKey: 'id',
                        page: false, 
                        expand: false,
                        searchShow:false,
                        defaultExpandAll:true,
                        column: [
                            { prop: "id", label: `${this.i18n.t('primary_key')}`, search: false, hide: true, type: "number", display: false, showColumn: false, },
                            
                            { prop: "parentId", label: `上级分类`, search: false, hide: true, showColumn: false,type: "tree",defaultExpandAll: true, props: {label: 'name',value: 'id',children:'children' },dicUrl:`${Vue.prototype.$baseURL}/category/list`, showAllLevels:false, emitPath:false,checkStrictly: true },
                            { prop: "name", label: `名称`, search: false, hide: false, type: "input", clearable: true,rules:[{ required: true,trigger: "blur",message: `${this.i18n.t('pleaseenter')}`}], },
                            { prop: "code", label: `代码`, search: false, hide: false, type: "input", clearable: true,rules:[{ required: true,trigger: "blur",message: `${this.i18n.t('pleaseenter')}`}], },
                            // { prop: "tel", label: `${this.i18n.t('phone')}`, search: true, hide: false, type: "input", clearable: true },
                            { prop: "isDisable", label: `${this.i18n.t('status')}`, search: false, hide: false, value: 0, type: "radio", button: true, dicData: disableDicData, width: '80', },
                            { prop: "putLine", label: `推送线上`, search: false, hide: false, value: 0, type: "radio", button: true, dicData: putLineDicData, width: '80', },
                            { prop: "sort", label: `${this.i18n.t('sort')}`, search: false, hide: false, type: "number",step:100, value: 100, clearable: true },
                            { prop: "remark", label: `${this.i18n.t('note')}`,type:'textarea',  hide: true,showColumn: false,span:24,rows:2, },
                            { prop: "record", label: `${this.i18n.t('modification_record')}`, slot: true, display: false, showColumn: false, minWidth: 140, },
                        ]
                    },
                }
            },
            created() {
            },
            methods: {
             cellStyle({row,column,rowIndex,columnIndex})
             { 
                if(columnIndex==3){
                  if(row.isDisable==0){
                    return { color:'#409eff',}
                  }
                  else
                  {
                    return { color:'#f56c6c',}
                  }
                }

                 if(columnIndex==4){
                  if(row.putLine==0){
                    return { color:'#409eff',}
                  }
                  else
                  {
                    return { color:'#f56c6c',}
                  }
                }
              },
            }
        });

      
    </script>
}